<template>
  <view class="setting">
    <view class="setting-content">
      <navigator
        url="/pages/my/other/changeUserInfo"
        open-type="navigate"
        hover-class="navigator-hover"
        class="setting-item"
      >
        <view class="setting-content">
          <image src="/static/images/personal_info.png" class="setting-icon" />
          <text class="setting-text">个人信息修改</text>
        </view>
        <image src="/static/images/right.png" class="setting-right-icon" />
      </navigator>

      <!-- 修改密码 -->
      <navigator
        url="/pages/my/other/changepassword"
        open-type="navigate"
        hover-class="navigator-hover"
        class="setting-item"
      >
        <view class="setting-content">
          <image src="/static/images/password.png" class="setting-icon" />
          <text class="setting-text">修改密码</text>
        </view>
        <image src="/static/images/right.png" class="setting-right-icon" />
      </navigator>

      <!-- 修改邮箱 -->
      <navigator
        url="/pages/my/other/changgemail"
        open-type="navigate"
        hover-class="navigator-hover"
        class="setting-item"
      >
        <view class="setting-content">
          <image src="/static/images/email.png" class="setting-icon" />
          <text class="setting-text">修改邮箱</text>
        </view>
        <image src="/static/images/right.png" class="setting-right-icon" />
      </navigator>

      <view class="setting-item" @tap="logout()">
        <view class="setting-content">
          <image src="/static/images/exit.png" class="setting-icon" />
          <text class="setting-text">退出登录</text>
        </view>
        <image src="/static/images/right.png" class="setting-right-icon" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores";

const userStore = useUserStore();

const logout = () => {
  userStore.clearUserInfo();
  uni.navigateTo({ url: "/pages/login/login" });
};
</script>

<style scoped lang="scss">
.setting {
  background-color: #f0f0f0;
  height: 100vh;
  .setting-content {
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    .setting-item {
      padding: 20rpx 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .setting-content {
        display: flex;
        align-items: center;
        .setting-icon {
          width: 32rpx;
          height: 32rpx;
        }
        .setting-text {
          margin-left: 28rpx;
          font-size: 32rpx;
          color: #333;
          margin-top: -1rpx;
        }
      }
      .setting-right-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
